
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="../bower_components/paper-radio-button/paper-radio-button.html">

<link rel="import" href="shared-styles.html">

<dom-module id="${project.namespace}-locale-select">
  <template>
    <style include="shared-styles"></style>
    <style>
      :host {
        display: block;
      }
    </style>
    
    <paper-radio-group selected="[[locale]]" on-selected-changed="_changeLocale">
      <paper-radio-button name="en">English</paper-radio-button>

    </paper-radio-group>
    
  </template>
  <script>
    {
      /**
       * @extends {Polymer.Element}
       */
      class ${polymer.localeSelect} extends Polymer.Element {
        static get is() {
          return '${project.namespace}-locale-select';
        }

        static get properties() {
          return {
            locale: {
              type: String,
              value: function () {
                return cuba.getApp().locale;
              }
            }
          }
        }

        _changeLocale(event) {
          cuba.getApp().locale = event.detail.value;
        }
      }

      customElements.define(${polymer.localeSelect}.is, ${polymer.localeSelect});
    }
  </script>
</dom-module>
